<template>
  <Dialog v-model="dialogVisible" title="指派配送员" width="50%">
    <el-form  :inline="true" ref="formRef"  :model="formData" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="formData.logisticsNo" />
        </el-form-item>
        <el-form-item >
          <el-button  type="primary" @click="searchHandle">搜索</el-button>
        </el-form-item>
    </el-form>
    <ContentWrap>
      <el-table @current-change="handleCurrentChange"  :data="list" row-key="id" highlight-current-row style="width: 100%">
        <el-table-column prop="username" label="姓名"  />
        <el-table-column prop="mobile" label="手机号"  />
        <el-table-column :formatter="dateFormatter" prop="createTime" label="创建时间"  />
      </el-table>
      <Pagination
      v-model:limit="queryParams.pageSize"
      v-model:page="queryParams.pageNo"
      :total="total"
      @pagination="getList"
    />
    </ContentWrap>
    <!-- <el-table  :data="list" row-key="id"></el-table> -->
    <template #footer>
      <el-button :disabled="formLoading" type="primary" @click="sureHandle">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script lang="ts" setup>
import * as TradeOrderApi from '@/api/mall/trade/order'
import { dateFormatter } from '@/utils/formatTime'
import { copyValueToTarget } from '@/utils'

defineOptions({ name: 'OrderDeliveryForm' })

// const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const loading = ref(true) // 列表的加载中
const total = ref(2) // 列表的总页数
const list  = ref([])

const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const expressType = ref('express') // 如果值是 express，则是快递；none 则是无；未来做同城配送；
const formData = ref<TradeOrderApi.DeliveryVO>({
  id: undefined, // 订单编号
  logisticsId: null, // 物流公司编号
  logisticsNo: '' // 物流编号
})
const queryParams = ref({
  pageNo: 1, // 页数
  pageSize: 10, // 每页显示数量
})
const formRef = ref() // 表单 Ref

const searchHandle = ()=>{

}

/** 打开弹窗 */
const open = async (row: TradeOrderApi.OrderVO) => {
  console.log('rowgg-->',row)
  resetForm()
  // 设置数据
  copyValueToTarget(formData.value, row)
  console.log('formData.value',formData.value);
  if (row.logisticsId === 0) {
    expressType.value = 'none'
  }
  dialogVisible.value = true
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
// const submitForm = async () => {
//   // 提交请求
//   formLoading.value = true
//   try {
//     const data = unref(formData)
//     if (expressType.value === 'none') {
//       // 无需发货的情况
//       data.logisticsId = 0
//       data.logisticsNo = ''
//     }
//     await TradeOrderApi.deliveryOrder(data)
//     message.success(t('common.updateSuccess'))
//     dialogVisible.value = false
//     // 发送操作成功的事件
//     emit('success', true)
//   } finally {
//     formLoading.value = false
//   }
// }

const currentRow = ref()

const handleCurrentChange = (val: any) => {
  currentRow.value = val
}

//确定操作
const sureHandle = async()=>{
  let target = unref(currentRow)
  if(!target) return message.error('请选择配送员')
  const data = unref(formData)
  let _params = {
    id:data.id,//订单id
    deliverymanUserId:target.id,//配送员id
    deliverymanUserName:target.username,//配送员姓名
  }
  console.log('配送人资料',_params);
  await TradeOrderApi.updateOrderDelivery(_params)
  message.success('派送成功')
  dialogVisible.value = false
  // 发送操作成功的事件
  emit('success', true)
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined, // 订单编号
    logisticsId: null, // 物流公司编号
    logisticsNo: '' // 物流编号
  }
  formRef.value?.resetFields()
}



/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await TradeOrderApi.getpageForAppList(unref(queryParams))
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

onMounted(async () => {
  getList()
})
</script>
